<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>User</title>
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <script type="text/javascript" src="../jquery.min.js"></script>
    <script type="text/javascript" src="../jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../xheditor-1.2.2.min.js"></script>
    <script type="text/javascript" src="../xheditor_lang/zh-cn.js"></script>
</head>
<body>
   <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north'" style="height:30px">
            <a href="#" id="loadAllDataBtn" class="easyui-linkbutton" data-options="iconCls:'icon-add'">所有新闻</a>
            <a href="#" id="addBtn" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加新闻</a>
            <a href="#" id="removesBtn" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除多个</a>
            <input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:doSearch" style="width:200px">

        </div>
        <div data-options="region:'west',split:true" title="新闻分类" style="width:200px;">
            <ul id="tt"></ul>
        </div>
        <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
            <table id="dg"></table>

            <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:200px;padding:10px">
                <form id="ff" method="post">
                    <div style="margin-bottom:10px">
                        <input class="easyui-textbox" name="_id" style="width:100%" data-options="label:'新闻Id:'">
                    </div>
                    <div style="margin-bottom:30px">
                        <input class="easyui-textbox" name="title" style="width:100%" data-options="label:'标题:',required:true">
                        <textarea class="xheditor" rows="5" cols="20" ></textarea>
                    </div>
                </form>
                <div style="text-align:center;padding:5px 0">
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery.serializeJSON/2.9.0/jquery.serializejson.js"></script>
    
    <script>
            var cateId = null;
            $('#tt').tree({
                url: "http://localhost:3000/cate/list/1",
                method:'get',
                onClick: function(node){//点击标题分类显示新闻
                    cateId = node._id;
                    $("#dg").datagrid({
                        queryParams: {
                            cateId: cateId
                        }
                    }).datagrid('reload');
                }
            });
        //子新闻的分类
        $('#dg').datagrid({
            url:'http://localhost:3000/news/list',
            method:'post',
            queryParams: {
                cateId: cateId
            },
            fit:true,
            pagination:true,
            pageSize:10,
            pageList:[10,20,30],
            columns:[[
                    {field:'ck',title:'复选',checkbox:true},
                    {field:'title',title:'新闻标题',width:100},
                    {field:'desc',title:'新闻内容',width:200},
                    {field:'operate',title:'操作', width:80,
                    formatter: function(value,row,index){
                        return "<a onclick=deleteData('"+ row._id+"')>删除</a> <a onclick=editData('"+ row._id+"')>修改</a>"
                    }
                }
            ]]
        });
            //添加
            $("#addBtn").click(function(){
                $('#ff').form('clear');
                if(cateId === null){
                    $.messager.show({
                    title:'信息提示',
                    msg:'请选择分类，否则无法添加新闻',
                    timeout:3000,
                    showType:'show'
                });
                }else{
                    $('#dlg').dialog('open');//添加新闻的提示框弹出
                    
                }
            });
            
            $('#dlg').css({height:300,width:500});
            //添加按钮
            function submitForm(){
            var postData = $("#ff").serializeJSON();//这个需要装一个插件（serializejson），然后引入一个cdn
                postData.cateId = cateId;
                if(postData._id.length>0){//如果添加新闻是写了id就默认修改这个id的新闻
                    delete postData.cateId;
                    // edit
                    $.ajax({
                        type:"put",
                        url:"http://localhost:3000/news/data/"  + postData._id,
                        data: postData,
                        async:true
                    }).done(function(res){
                        $.messager.show({
                        title:'信息提示',
                        msg:'数据修改成功',
                        timeout:3000,
                        showType:'show'
                    });
                    $('#dlg').dialog('close');
                    $('#dg').datagrid('reload');
                    })
   
                }else{  //如果添加新闻是没有写id默认就是在选中的新闻列表下添加一条新闻
                    // add
                    delete postData._id;
                    $.ajax({
                        type:"post",
                        url:"http://localhost:3000/news/data",
                        data: postData,
                        async:true
                    }).done(function(res){
                        $.messager.show({
                        title:'信息提示',
                        msg:'数据添加成功',
                        timeout:3000,
                        showType:'show'
                    });
                    $('#dlg').dialog('close');
                    $('#dg').datagrid('reload');
                    })
                }
        };
        
        
        function clearForm(){
            $('#ff').form('clear');
        };
        
            //删除新闻，这边定义函数，调用直接在html里面调用
            function deleteData(id){
                $.messager.confirm('确认删除', '你确认删除数据吗？', function(r){
                    if (r){
                            $.ajax({
                                type:"delete",
                                url:"http://localhost:3000/news/data/" + id,
                                async:true
                            }).done(function(res){
                                $("#dg").datagrid('reload');
                            })
                    }
                });
            };
            //编辑新闻，这边定义函数，调用直接在html里面调用
            function editData(id){
                $.ajax({
                    type:"put",
                    url:"http://localhost:3000/news/data/" +id,
                    async:true
                }).done(function(res){
                    $('#ff').form('load', res);
                    $('#dlg').dialog('open');
                })
            }
            
            //删除多个
            $("#removesBtn").click(function(){
                var rows = $("#dg").datagrid('getSelections');
                if(rows.length>0){
                    var ids = [];
                    rows.forEach(function(item,idx){
                        ids.push(item._id)
                    });
                    //console.log(ids);
                    for(var i=0;i<ids.length;i++){
                        $.ajax({
                            type:"delete",
                            url:"http://localhost:3000/news/data/" + ids[i],
                            async:true
                        }).done(function(res){
                            $("#dg").datagrid('reload');
                        })
                    }
                }           
            })
            
            $("#loadAllDataBtn").click(function(){
                cateId = null;
                 $("#dg").datagrid({
                queryParams: {
                    cateId: cateId
                }
            }).datagrid('reload');
            })
            
            function doSearch(value){
            $("#dg").datagrid({
                queryParams: {
                    cateId: cateId,
                    title: value
                }
            }).datagrid('reload');
        }
    </script>
</body>
</html>